<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
		<title>Editar foto</title>
		<script src="/scripts/jquery.min1.7.js"></script>
		<script src="/scripts/jquery.Jcrop.min.js"></script>
		<link rel="stylesheet" href="/styles/jquery.Jcrop.min.css" type="text/css" />
		<script type="text/javascript">

			jQuery(document).ready(function(){

				jQuery('#cropbox').Jcrop({
					onChange: showCoords,
					onSelect: showCoords,
					aspectRatio: 1
				});

			});

			// Simple event handler, called from onChange and onSelect
			// event handlers, as per the Jcrop invocation above
			function showCoords(c)
			{
				jQuery('#x1').val(c.x);
				jQuery('#y1').val(c.y);
				jQuery('#x2').val(c.x2);
				jQuery('#y2').val(c.y2);
				jQuery('#w').val(c.w);
				jQuery('#h').val(c.h);
			};

		</script>
	</head>
	<body style="text-align:center">
	<div align="center">
		<!-- This is the image we're attaching Jcrop to -->
		<img src="/fotos/<? echo $data['file']; ?>" id="cropbox" />

		<!-- This is the form that our event handler fills -->
		<form method="POST" class="coords" action="">
			<input type="hidden" size="4" id="x1" name="x1" />
			<input type="hidden" size="4" id="y1" name="y1" />
			<input type="hidden" size="4" id="x2" name="x2" />
			<input type="hidden" size="4" id="y2" name="y2" />
			<input type="hidden" size="4" id="w" name="w" />
			<input type="hidden" size="4" id="h" name="h" /><br>
			Editar comentario: <input type="text" name="comentario" value="<? echo $data['foto']['comentario']?>"/><br>
			Selecciona categoría: <select name="categoria" id="select-cat">
			<?php
			$result = $data['categorias'];
	
			for($i=0, $count = count($result); $i<$count; $i++){
				if($fotos['id_categoria'] == $result[$i]['id'])
					echo '<option value="'.$result[$i]['id'].'" selected="selected">'.$result[$i]['nombre'].'</option>';
				else	echo '<option value="'.$result[$i]['id'].'">'.$result[$i]['nombre'].'</option>';}
	
			?>
	
</select><br>
			<input type="submit" name="actualizar" value="Actualizar"/>
			<input type="button" name="cancelar" value="Cancelar" onclick="parent.location.reload()"/>
		</form>

	</div>

	</body>

</html>

